<template>
  <div class="roomXq" v-show="leftStyle">
    <div style="height: 10px;"></div>
  <div class="weui-panel__bd">
    <a class="weui-media-box weui-media-box_appmsg">
      <div class="weui-media-box__hd">
        <img class="weui-media-box__thumb" src="../img/head.png">
      </div>
      <div class="weui-media-box__bd">
        <h4 class="weui-media-box__title">房间号：888888</h4>
        <p class="weui-media-box__desc">红中麻将</p>
      </div>
      <div class="jiesan">
        <img src="../img/head.png">
      </div>
    </a>
  </div>
  <div class="weui-cells">
  <div class="weui-cell">
    <div class="weui-cell__hd"><img src=""></div>
    <div class="weui-cell__bd">
      <p>标题文字</p>
    </div>
    <div class="weui-cell__ft">说明文字</div>
  </div>
  </div>
    <footer>
      <div class="weui-cells" style="margin-top:0;position:static;height:100%;background-color:transparent">
        <div class="weui-cell" style="height:100%;padding:0;padding-left:3%;">
          <a>
            <div class="weui-cell__hd"><img src="../img/back-btn.png" style="width:20px;height:20px;"></div>
          </a>
          <div class="weui-cell__bd" style="margin-left:28%;">
            <p style="color:white;font-size:20px;">房间详情</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      leftStyle: {
      },
    }
  },
  mounted() {
    this.getHeigh()
  },
  methods: {
    short(nickname) {
      if (nickname) {
        if (nickname.length > 2) {
          return nickname.slice(0, 5)
        }
      }
      return nickname
    },
    getHeigh() {
      this.leftStyle = {
        height: document.body.offsetHeight + 'px'
      }
      console.log('leftStyle', this.leftStyle)
    },
  },
  computed: {
    ...mapState(['api', 'VueEventBus'])
  },
  components: {
  }
}

</script>

<style lang="less" >
.roomXq {
  background-image: url('../img/bg.png');
  height: 100%;
  width: 100%;
  background-size: cover;
  .weui-panel__bd{
    width: 96%;
    margin-left: 2%;
    background: linear-gradient( #122845, #112d4a);
  //  margin-top: 15px;
  opacity: 0.9;
  .weui-media-box{
    // width: 1%;
    .jiesan{
      float: right;
      img{
        width: 50px;
        height: 30px;
      }
    }
    .weui-media-box__bd{
      h4{
        color: white;
      }
      p{
        color: white;
      }
    }
  }
  }
  .weui-cells{
    width: 96%;
    margin-left: 2%;
  }
}

.footer:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  background-image: url('../img/back-bottom.png');
  flex: 0 0 auto;
}
</style>
